<template>
  <footer class="bg-white pt-8 pb-6 mt-8 border-t border-gray-200">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
        <div>
          <h3 class="font-bold text-gray-800 mb-4">关于我们</h3>
          <ul class="space-y-2 text-sm text-gray-600">
            <li><a href="#" class="hover:text-rose-500">品牌故事</a></li>
            <li><a href="#" class="hover:text-rose-500">企业文化</a></li>
            <li><a href="#" class="hover:text-rose-500">门店展示</a></li>
            <li><a href="#" class="hover:text-rose-500">联系我们</a></li>
          </ul>
        </div>
        <div>
          <h3 class="font-bold text-gray-800 mb-4">购物指南</h3>
          <ul class="space-y-2 text-sm text-gray-600">
            <li><a href="#" class="hover:text-rose-500">购物流程</a></li>
            <li><a href="#" class="hover:text-rose-500">支付方式</a></li>
            <li><a href="#" class="hover:text-rose-500">常见问题</a></li>
            <li><a href="#" class="hover:text-rose-500">售后服务</a></li>
          </ul>
        </div>
        <div>
          <h3 class="font-bold text-gray-800 mb-4">配送服务</h3>
          <ul class="space-y-2 text-sm text-gray-600">
            <li><a href="#" class="hover:text-rose-500">配送范围</a></li>
            <li><a href="#" class="hover:text-rose-500">配送时间</a></li>
            <li><a href="#" class="hover:text-rose-500">配送费用</a></li>
            <li><a href="#" class="hover:text-rose-500">特殊配送服务</a></li>
          </ul>
        </div>
        <div>
          <h3 class="font-bold text-gray-800 mb-4">联系我们</h3>
          <ul class="space-y-2 text-sm text-gray-600">
            <li class="flex items-center">
              <font-awesome-icon icon="phone" class="mr-2 text-rose-500" /> 
              400-800-8888
            </li>
            <li class="flex items-center">
              <font-awesome-icon icon="envelope" class="mr-2 text-rose-500" /> 
              service@flowercompany.com
            </li>
            <li class="flex items-center">
              <font-awesome-icon icon="map-marker-alt" class="mr-2 text-rose-500" /> 
              北京市朝阳区建国路88号
            </li>
          </ul>
          <div class="flex space-x-4 mt-4">
            <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
              <font-awesome-icon :icon="['fab', 'weixin']" />
            </a>
            <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
              <font-awesome-icon :icon="['fab', 'weibo']" />
            </a>
            <a href="#" class="text-gray-400 hover:text-rose-500 text-lg">
              <font-awesome-icon icon="envelope" />
            </a>
          </div>
        </div>
      </div>
      <div class="border-t border-gray-200 pt-6 text-center text-sm text-gray-500">
        <p>© 2023 花礼相伴 版权所有 京ICP备12345678号</p>
      </div>
    </div>
  </footer>
</template>

<style scoped>
a {
  cursor: pointer;
}
</style>
